<template>
    <div class="container">
        <el-menu
            :default-active="menuListActiveInfo"
            :background-color="propJson.backgroundColor"
            :text-color="propJson.textColor"
            :active-text-color="propJson.activeTextColor"
            :style="execStyle"
            :info="menuListValue"
            :info2="menuListActiveValue"
        >
            <span v-for="item in menuListInfo">
                <SubMenuListComponent v-if="item[propJson.subMenuFieldName] && item[propJson.subMenuFieldName].length > 0"
                                      :sub-menu-item="item" :sub-menu-list="item[propJson.subMenuFieldName]" :sub-menu-field="propJson.subMenuFieldName" :prop-json="propJson" :common-param="commonParam"/>
                <el-menu-item v-else :index="item.menuListIndex" @click="doMenuItemClick(item)">
                    <span>{{item.menuListTitle}}</span>
                </el-menu-item>
            </span>
        </el-menu>
    </div>
</template>

<script>
import SubMenuListComponent from "@/components/lowcodeCommon/SubMenuListComponent"
import {doThirdServiceAction, doThirdServiceValue} from "@/request/lowcode/thirdService";
import jsonpath from "jsonpath";
import {deepCopy} from "@/utils/tagCreate";

export default {
    name: "MenuListComponent",
    props: ['propJson', 'commonParam'],
    data() {
        return {
            menuListInfo: [],
            menuListActiveInfo: ""
        }
    },
    components: {
        SubMenuListComponent
    },
    computed: {
        execStyle() {
            let style = "";
            if (this.propJson.listHeight) {
                style += "height: " + this.propJson.listHeight + ";";
            }
            return style;
        },
        async menuListValue() {
            await doThirdServiceValue(this.propJson.actionInfo, this.commonParam, this.execThen, this.execCatch, null)
        },
        async menuListActiveValue() {
            await doThirdServiceValue(this.propJson.defaultActiveActionInfo, this.commonParam, this.execActiveThen, this.execActiveCatch, null)
        }
    },
    methods: {
        execThen(resValue) {
            if (!resValue || resValue.length <= 0) {
                this.menuListInfo = []
                return
            }
            this.resetMenuListInfo(resValue)
            this.menuListInfo = resValue
        },
        execCatch(resValue) {

        },
        doClickExecThen(execParam) {

        },
        doClickExecCatch(execParam) {

        },
        execActiveThen(resValue) {
            this.menuListActiveInfo = resValue
        },
        execActiveCatch(resValue) {

        },
        resetMenuListInfo(listInfo) {
            for (let i = 0; i < listInfo.length; i++) {
                let info = listInfo[i]
                if (info[this.propJson.subMenuFieldName] && info[this.propJson.subMenuFieldName].length > 0) {
                    this.resetMenuListInfo(info[this.propJson.subMenuFieldName])
                }
                let indexRes = jsonpath.query(info, this.propJson.menuIndex)
                let titleRes = jsonpath.query(info, this.propJson.menuTitle)
                if (indexRes.length > 0 && titleRes.length > 0) {
                    info.menuListIndex = indexRes[0]
                    info.menuListTitle = titleRes[0]
                }
            }
        },
        async doMenuItemClick(item) {
            // 编辑模式不触发点击事件
            if (this.propJson.editFlag) {
                return
            }
            let innerParams = this.propJson.menuClickInnerRequestVariable
            let resList = deepCopy(this.propJson.clickAction)
            // 解析item字段
            let itemInnerInfo = "";
            if (innerParams[2].variableParamName) {
                itemInnerInfo = jsonpath.query(item, innerParams[2].variableParamName)
                if (itemInnerInfo && itemInnerInfo.length > 0) {
                    itemInnerInfo = itemInnerInfo[0]
                } else {
                    itemInnerInfo = "";
                }
            }
            for (let i = 0; i < resList.length; i++) {
                let action = resList[i]
                if (!action.apiParamList) {
                    action.apiParamList = []
                }
                if (innerParams[0].variableName) {
                    let menuIndexInfo = {variableName: innerParams[0].variableName, variableValue: item.menuListIndex, type: "custom", variableType: "String", variableParamName: ""}
                    action.apiParamList.push(menuIndexInfo)
                }
                if (innerParams[1].variableName) {
                    let menuTitle = {variableName: innerParams[1].variableName, variableValue: item.menuListTitle, type: "custom", variableType: "String", variableParamName: ""}
                    action.apiParamList.push(menuTitle)
                }
                if (innerParams[2].variableName) {
                    let itemInfo = {variableName: innerParams[2].variableName, variableValue: itemInnerInfo, type: "custom", variableType: "String", variableParamName: ""}
                    action.apiParamList.push(itemInfo)
                }
            }
            // 定义一个标志位，后续同步执行
            let awaitObj = {flag: false, res: true}
            await doThirdServiceAction(resList, awaitObj, this.commonParam, this.doClickExecThen, this.doClickExecCatch, this.propJson);
        }
    }
}
</script>

<style scoped lang="less">

</style>